<template>
	<div class="home-container layout-pd">
		<el-form size="large" class="login-content-form">
			<el-row :gutter="2" class="home-card-one mb15">
				<el-col
				:xs="24"
				:sm="16"
				:md="16"
				:lg="12"
				:xl="12"
				>
					<el-form-item class="login-animation1">
						<el-input text :placeholder="$t('message.ptAccount.cookiePlaceholder')" v-model="state.userPT.cookie" clearable autocomplete="off">
							<template #prefix>
								<el-icon class="el-input__icon"><ele-Key /></el-icon>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col
				:xs="24"
				:sm="12"
				:md="6"
				:lg="3"
				:xl="3"
				>
					<el-form-item class="login-animation1">
						<el-input text :placeholder="$t('message.ptAccount.threadCountPlaceholder')" v-model="state.userPT.threadCount" clearable autocomplete="off">
							<template #prefix>
								<el-icon class="el-input__icon"><ele-Cpu /></el-icon>
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col
				:xs="24"
				:sm="12"
				:md="6"
				:lg="3"
				:xl="3"
				>
					<el-form-item class="login-animation1">
						<el-select v-model="state.userPT.selectPT" placeholder="请选择PT站点">
							<el-option v-for="sel in state.ptStation" :key="sel.value" :label="sel.label" :value="sel.value" />
						</el-select>
					</el-form-item>
					
				</el-col>
				<el-col
				:xs="24"
				:sm="12"
				:md="6"
				:lg="3"
				:xl="3"
				>
					<el-button type="primary" class="login-content-submit" round v-waves @click="startTask" :loading="state.userPT.loading">
						<span>{{ $t('message.ptAccount.openPTButtonText') }}</span>
					</el-button>
					
				</el-col>
				
				
			</el-row>
		</el-form>
		<el-row :gutter="15" class="home-card-two mb15">
			
		</el-row>
		
	</div>
</template>

<script setup lang="ts" name="home">
import { computed } from 'vue';
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { ElMessage } from 'element-plus';

// 定义变量内容
const homeLineRef = ref();
const homePieRef = ref();
const homeBarRef = ref();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
	global: {
		homeChartOne: null,
		homeChartTwo: null,
		homeCharThree: null,
		dispose: [null, '', undefined],
	} as any,
	userPT:{
		cookie:"",
		threadCount: "50",
		selectPT:"52PT",
		loading: false
	},
	ptStation:[{
		label: '52PT站点',
		value: '52PT'
	},{
		label: 'HD蚂蚁PT',
		value: '蚂蚁'
	},{
		label: '自由农场',
		value: '自由农场'
	}]
});

// 开启任务
const startTask = async () => {
	state.userPT.loading = true;
	// 存储 token 到浏览器缓存
	//.set('token', Math.random().toString(36).substr(0));
	// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
	//Cookies.set('userName', state.ruleForm.userName);
	setTimeout(()=>{
		state.userPT.loading = false;
	},3000)
};

</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
	overflow: hidden;
	.home-card-one,
	.home-card-two,
	.home-card-three {
		.home-card-item {
			width: 100%;
			height: 130px;
			border-radius: 4px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);
			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}
			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;
				i {
					color: var(--el-text-color-placeholder);
				}
			}
			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}
	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/4) + s;
			}
		}
	}
	.home-card-two,
	.home-card-three {
		.home-card-item {
			height: 400px;
			width: 100%;
			overflow: hidden;
			.home-monitor {
				height: 100%;
				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;
					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;
						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}
					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}
}

.login-content-form {
	margin-top: 20px;
	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}
	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;
		&:hover {
			color: #909399;
		}
	}
	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}
	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 200;
	}
}
</style>
